<%@page import="org.smartercontext.contextmger.DTO.PersonDTO"%>
<%@page import="java.util.ArrayList"%>
<%@page import="org.smartercontext.contextmger.utilities.GetFriendsAndFamily"%>
<%@page import="com.hp.hpl.jena.rdf.model.Resource"%>
<%@page import="com.hp.hpl.jena.rdf.model.Model"%>
<%@page import="org.smartercontext.contextmger.contextsphere.ContextSphereController"%>
<%@page contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    	               "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Friends & Family</title>
    <!-- Bootstrap core CSS -->
    <link rel="shortcut icon" href="Icons/scicon.png">
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="http://getbootstrap.com/examples/dashboard/dashboard.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  <style type="text/css"></style>
 </head>
   <body style="background-color: #eee;">
<%
	
		if(session.getAttribute("username")==null){
			response.sendRedirect("login.jsp?Err=3");
		}
	
	%>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.jsp">
          <img src="Images/logoSmartContext_CircleH.png">
          <img src="Images/logoSmartContext_header.png"></a>
        </div>
        
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
          	<li><a href="index.jsp">Home</a></li>
            <li class="active"><a href="manageContext.jsp">Manage your context</a></li>
            <li><a href="recommendations.jsp">Recommendations</a></li>
            <li><a href="linkWith.jsp">Link with...</a></li>
            <li><a href="logout.jsp">Logout</a></li>
          </ul>
          <form class="navbar-form navbar-right" action="">
            <input type="text" class="form-control" placeholder="Search...">
          </form>
        </div><!--/.nav-collapse -->
      </div>
    </div>

	<div class="container-fluid">
	 <div class="row">
	 	 <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li><a href="manageContext.jsp">Overview</a></li>
            <li><a href="manageContext_Profile.jsp">Profile</a></li>
            <li><a href="manageContext_W&S.jsp">Work & Study</a></li>
            <li class="active"><a href="manageContext_F&F.jsp">Friends & Family</a></li>
            <li><a href="manageContext_M&M.jsp">Movies, Music & Books</a></li>
            <li><a href="manageContext_Products.jsp">Products</a></li>
            <li><a href="manageContext_PaymentM.jsp">Preferred Payment Method</a></li>
            <li><a href="PrintRDFGraphServlet" target="_blank">Watch my RDF Graph</a></li>
          </ul>
        </div>
      </div>
     </div>
     
     <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
     <h1 class="page-header">Friends & Family</h1>
     <a href="javascript:addFriend()"><img src="Icons/addfriend.png"><strong>Add a friend to your context Sphere</strong></a>
          	
     	<div style="text-align: center;">
     	<form action="AddFriendServlet" id="formAction">
     		<table class="table table-striped" id="tablePeople" style="text-align: left;">
     			<thead>
     				<tr>
     					<th>Name</th>
     					<th>Relationship</th>
     				</tr>
     			</thead>
     			<tbody id="tbody">
     				
     			</tbody>
     		</table>
     		<%
     			if(request.getQueryString()!=null){
     				String error = request.getParameter("Error");
     				if(error.equals("1")){
     					out.println("<p style=\"color:maroon\">Error: The friend hasn't added to your context sphere</p>");
     				}else if(error.equals("2")){
     					out.println("<p style=\"color:maroon\">Error: The friend hasn't modified</p>");
     				}else if(error.equals("3")){
     					out.println("<p style=\"color:maroon\">Error: The friend hasn't deleted</p>");
     				}
     			}
     		
     		%>
     		<button class="btn btn-sm btn-primary" type="submit" id="subM" style="width: 10em; height: 3em;" disabled="disabled">Save changes</button>
     		
     	</form>
     	<table class="table table-striped" style="text-align: left;">
     			<thead>
     				<tr>
     					<th>Name</th>
     					<th>Relationship</th>
     					<th>Options</th>
     				</tr>
     			</thead>
     			<tbody>
     				<%
     					if(session.getAttribute("username")!=null){
     						
     						
     						GetFriendsAndFamily gff = new GetFriendsAndFamily();
     						String username = session.getAttribute("username").toString();
     						ContextSphereController csc = new ContextSphereController();
     						
     						Model usermodel = csc.getRDFGraph(username);
     						
							ArrayList<Object>list = gff.getFriendsAndFamily(usermodel, username);
     						
     						for(int i=0;i<list.size();i++){
     							PersonDTO pdto = (PersonDTO)list.get(i);
     							String fbId = pdto.getFacebookId();
     							String name = pdto.getName();
     							String relationship = pdto.getRelationship();
     							
     							if(relationship!=null){
     								out.println("<tr>"+
     							"<td>"+name+"</td><td>"+relationship+"</td><td>"+
     							"<a href=\"javascript:modifyFriend("+fbId+",'"+name+"');\" >Edit</a>-<a href=\"javascript:delete_f('"+name+"');\" >Delete</a></td>"+
     							"</tr>");
     								
     							}else{
     								out.println("<tr>"
     								+"<td>"+name+"</td><td>Friend</td>"+
     								"<a href=\"javascript:modifyFriend("+fbId+",'"+name+"+);\" >Edit</a>-<a href=\"javascript:delete_f('"+name+"');\" >Delete</a></td>"+		
     								"</tr>");
     							}
     							
     						}
     						
     					}
     				
     				%>
     				
     			</tbody>
     		</table>
     	</div>
     </div>
   

 <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" charset="ISO-8859-1">
    
    	
    	
    	var counter = 0;
    	var deleteR = 0;
    	
    	function addFriend(){
    		document.getElementById("formAction").action = "AddFriendServlet";
    		document.getElementById("subM").value = 'Save friend';
    		
    		if(deleteR == 0){
    			
    			var table = document.getElementById("tbody").getElementsByTagName("tr").length;
    			
    			for(var i=0;i<table;i++){
    				document.getElementById("tbody").deleteRow(0);
    			}
    			deleteR = 1;
    			deleteR1 = 0;
    			deleteR2 = 0;
    			friends = [];
    			friendsD = [];
    			
    		}
    		
    		var newrow = document.createElement('tr');
    		newrow.innerHTML = "<tr><td><input type='text' name='nameJAV"+counter+"' value='"+name+"' id='nameJAV"+counter+"' onchange='enableButton("+counter+");' placeholder='Name' size='40'></td><td><select name='relJAV"+counter+"'>"+
    		"<option value='friendOf'>Friend</option>"+
    		"<option value='hasAsAunt'>Aunt</option>"+
    		"<option value='hasAsBrotherInLaw'>Brother-in-law</option>"+
    		"<option value='hasAsBrother'>Brother</option>"+
    		"<option value='hasAsCousin'>Cousin</option>"+
    		"<option value='hasAsDaugtherInLaw'>Daugther-in-law</option>"+
    		"<option value='parentOf'>Daugther</option>"+
    		"<option value='hasAsFamilyMember'>Simple Family Member</option>"+
    		"<option value='childOf'>Father</option>"+
    		"<option value='hasAsFatherInLaw'>Father-in-law</option>"+
    		"<option value='hasAsGrandChild'>Grandchild</option>"+
    		"<option value='hasAsGrandMa'>GrandMa</option>"+
    		"<option value='hasAsGrandPa'>GrandPa</option>"+
    		"<option value='hasAsHalfBro'>Half Brother</option>"+
    		"<option value='hasAsHalfSister'>Half sister</option>"+
    		"<option value='hasAsMotherInLaw'>Mother-in-law</option>"+
    		"<option value='childOf'>Mother</option>"+
    		"<option value='hasAsNephew'>Nephew</option>"+
    		"<option value='hasAsNiece'>Niece</option>"+
    		"<option value='hasAsSister'>Sister</option>"+
    		"<option value='hasAsSisterInLaw'>Sister-in-law</option>"+
    		"<option value='hasAsSonInLaw'>Son-in-law</option>"+
    		"<option value='parentOf'>Son</option>"+
    		"<option value='hasAsStepBrother'>Step Brother</option>"+
    		"<option value='hasAsStepDaugther'>Step Daugther</option>"+
    		"<option value='hasAsStepFather'>Step Father</option>"+
    		"<option value='hasAsStepMother'>Step Mother</option>"+
    		"<option value='hasAsStepSister'>Step Sister</option>"+
    		"<option value='hasAsStepSon'>Step Son</option>"+
    		"<option value='hasAsUncle'>Uncle</option>"+
    		"</select></td></tr>";
    		document.getElementById("tbody").appendChild(newrow);
    		counter++;
    		
    	}
    	
	function enableButton(id){
    		
    		idJ = "nameJAV"+id;
    		
    		if(document.getElementById(idJ).value !=""){
    			document.getElementById("subM").disabled = false;
    		}else{
    			document.getElementById("subM").disabled = true;
    		}
    		
    	}
	
	var counter1 = 0;
	var friends = [];
	var deleteR1 = 0;
	
	function modifyFriend(fbId, name){
		
		if(deleteR1 == 0){
			
			var table = document.getElementById("tbody").getElementsByTagName("tr").length;
			
			for(var i=0;i<table;i++){
				document.getElementById("tbody").deleteRow(0);
			}
			deleteR1 = 1;
			deleteR = 0;
			deleteR2 = 0;
			friendsD = [];
			
		}
		
		document.getElementById("formAction").action = "ModifyFriendServlet";
		document.getElementById("subM").disabled = false;
		document.getElementById("subM").value = 'Delete friend';
		
		var exists = friends.indexOf(name);
		
		if(exists == -1){
		
			
		friends.push(name);
		
		if(fbId == null){
			var newrow = document.createElement('tr');
    		newrow.innerHTML = "<tr><td>Old name: <input type='text' name='nameOJAV"+counter1+"' value='"+name+"' readonly size='40'> New name:<input type='text' name='nameJAV"+counter1+"' value='"+name+"' id='nameJAV"+counter1+"' onchange='enableButton("+counter1+");' placeholder='Name' size='40'></td><td><select name='relJAV"+counter1+"'>"+
    		"<option value='friendOf'>Friend</option>"+
    		"<option value='hasAsAunt'>Aunt</option>"+
    		"<option value='hasAsBrotherInLaw'>Brother-in-law</option>"+
    		"<option value='hasAsBrother'>Brother</option>"+
    		"<option value='hasAsCousin'>Cousin</option>"+
    		"<option value='hasAsDaugtherInLaw'>Daugther-in-law</option>"+
    		"<option value='parentOf'>Daugther</option>"+
    		"<option value='hasAsFamilyMember'>Simple Family Member</option>"+
    		"<option value='childOf'>Father</option>"+
    		"<option value='hasAsFatherInLaw'>Father-in-law</option>"+
    		"<option value='hasAsGrandChild'>Grandchild</option>"+
    		"<option value='hasAsGrandMa'>GrandMa</option>"+
    		"<option value='hasAsGrandPa'>GrandPa</option>"+
    		"<option value='hasAsHalfBro'>Half Brother</option>"+
    		"<option value='hasAsHalfSister'>Half sister</option>"+
    		"<option value='hasAsMotherInLaw'>Mother-in-law</option>"+
    		"<option value='childOf'>Mother</option>"+
    		"<option value='hasAsNephew'>Nephew</option>"+
    		"<option value='hasAsNiece'>Niece</option>"+
    		"<option value='hasAsSister'>Sister</option>"+
    		"<option value='hasAsSisterInLaw'>Sister-in-law</option>"+
    		"<option value='hasAsSonInLaw'>Son-in-law</option>"+
    		"<option value='parentOf'>Son</option>"+
    		"<option value='hasAsStepBrother'>Step Brother</option>"+
    		"<option value='hasAsStepDaugther'>Step Daugther</option>"+
    		"<option value='hasAsStepFather'>Step Father</option>"+
    		"<option value='hasAsStepMother'>Step Mother</option>"+
    		"<option value='hasAsStepSister'>Step Sister</option>"+
    		"<option value='hasAsStepSon'>Step Son</option>"+
    		"<option value='hasAsUncle'>Uncle</option>"+
    		"</select></td></tr>";
    		
    		document.getElementById("tbody").appendChild(newrow);
    		counter1++;
    		
		}else{
			var newrow = document.createElement('tr');
    		newrow.innerHTML = "<tr><td>Facebook name: <input type='text' name='nameJAV"+counter1+"' value='"+name+"' id='nameJAV"+counter1+"' readonly placeholder='Name' size='40'></td><td><select name='relJAV"+counter1+"'>"+
    		"<option value='friendOf'>Friend</option>"+
    		"<option value='hasAsAunt'>Aunt</option>"+
    		"<option value='hasAsBrotherInLaw'>Brother-in-law</option>"+
    		"<option value='hasAsBrother'>Brother</option>"+
    		"<option value='hasAsCousin'>Cousin</option>"+
    		"<option value='hasAsDaugtherInLaw'>Daugther-in-law</option>"+
    		"<option value='parentOf'>Daugther</option>"+
    		"<option value='hasAsFamilyMember'>Simple Family Member</option>"+
    		"<option value='childOf'>Father</option>"+
    		"<option value='hasAsFatherInLaw'>Father-in-law</option>"+
    		"<option value='hasAsGrandChild'>Grandchild</option>"+
    		"<option value='hasAsGrandMa'>GrandMa</option>"+
    		"<option value='hasAsGrandPa'>GrandPa</option>"+
    		"<option value='hasAsHalfBro'>Half Brother</option>"+
    		"<option value='hasAsHalfSister'>Half sister</option>"+
    		"<option value='hasAsMotherInLaw'>Mother-in-law</option>"+
    		"<option value='childOf'>Mother</option>"+
    		"<option value='hasAsNephew'>Nephew</option>"+
    		"<option value='hasAsNiece'>Niece</option>"+
    		"<option value='hasAsSister'>Sister</option>"+
    		"<option value='hasAsSisterInLaw'>Sister-in-law</option>"+
    		"<option value='hasAsSonInLaw'>Son-in-law</option>"+
    		"<option value='parentOf'>Son</option>"+
    		"<option value='hasAsStepBrother'>Step Brother</option>"+
    		"<option value='hasAsStepDaugther'>Step Daugther</option>"+
    		"<option value='hasAsStepFather'>Step Father</option>"+
    		"<option value='hasAsStepMother'>Step Mother</option>"+
    		"<option value='hasAsStepSister'>Step Sister</option>"+
    		"<option value='hasAsStepSon'>Step Son</option>"+
    		"<option value='hasAsUncle'>Uncle</option>"+
    		"</select></td></tr>";
    		
    		document.getElementById("tbody").appendChild(newrow);
    		counter1++;
    		
		}
		
		}
		
	}
	
	var deleteR2 = 0;
	var counter2 = 0;
	var friendsD = [];
	
	function delete_f(name){
		
				
		if(deleteR2 == 0){
			
			var table = document.getElementById("tbody").getElementsByTagName("tr").length;
			
			for(var i=0;i<table;i++){
				document.getElementById("tbody").deleteRow(0);
			}
			deleteR2 = 1;
			deleteR1 = 0;
			deleteR = 0;
			friends = [];
			
		}
		
		var exists = friendsD.indexOf(name);
		
		if(exists == -1){
			
			friendsD.push(name);
		
		document.getElementById("formAction").action = "DeleteFriendServlet";
		document.getElementById("subM").disabled = false;
		document.getElementById("subM").value = 'Delete friend';
		
		var newrow = document.createElement('tr');
		newrow.innerHTML = "<tr><td>Friend to delete: </td><td><input type='text' name='nameJAV"+counter2+"' value='"+name+"' id='nameJAV"+counter2+"' readonly placeholder='Name' size='40'></td></tr>";
		document.getElementById("tbody").appendChild(newrow);
		counter2++;
		}
	}
	</script>

</body>
</html>